<template>
	<!-- 优惠券 -->
	<view class="">
		<view class="head-nav">
			<view class="n-l" v-for="(item,index) in tabList" :key="index" @click="checkIndex(item.id)"
			:class="{'active':firstNum == index}">{{item.catetag}}
				<view class="icons"></view>
			</view>
		</view>
		<!-- 内容切换 -->
		<view class="content-main">
			<view class="couponlist" v-for="(item,index) in list" :key='index'>
				<view class="wrapper" :class="{'alreadystyle':item.used == 2,'overdue':item.used == 3}">
					<view class="content">						
						<view>
							<text class="moyfh fc-33">¥</text>
							<text  class="moneyNum fc-33">{{item.amount}}</text>
						</view>
						<view class="fs-24 fc-66 mar-top-10">满{{ item.activityPrice}}元可用</view>
					</view>					
					<view class="split-line"></view>
					<view class="tip">							
						<view class="vnameBx flex"><!-- 优惠券类型；0->全场赠券；1->会员赠券；2->购物赠券；3->注册赠券 -->
							<view class="couponmaes fc-33 fs-28" v-if="item.type == 0">全场赠券</view>
							<view class="couponmaes fc-33 fs-28" v-if="item.type == 1">会员赠券</view>
							<view class="couponmaes fc-33 fs-28" v-if="item.type == 2">购物赠券</view>
							<view class="couponmaes fc-33 fs-28" v-if="item.type == 3">注册赠券</view>
							<view class="fc-99 fs-26 mar-left-10" style="position:relative;top:6rpx;">全部酒店可用</view>
						</view>							
						<view class="fc-33 fs-26 mar-top-15">2021-06-06至2021-06-13</view>
						<view class="btnn fc-dc4" v-if="item.used == 1">待使用</view> 
						<view class="btnn fc-66" v-if="item.used == 2">已使用</view> 
						<view class="btnn fc-66" v-if="item.used == 3">已过期</view> 
					</view>
				</view>
			</view>			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList:[
					{
						catetag:'全部',id:0
					},{
						catetag:'待使用',id:1
					},{
						catetag:'已使用',id:2
					},{
						catetag:'已过期',id:3
					}
				],			
				firstNum:0,
				tagid:'',
				list: [{
				  code:"2c91e88272084d710172112415350021",
				  itemId:"7",				 
				  amount :   10,
				  activityPrice :   100,
				  isJoin:"201",
				  used:1,
				  count:'',//数量
				  enableTime:'',//可以领取的日期
				  endTime:'',//有效结束时间
				  memberLevel:'',//可领取的会员类型：0->无限时
				  minPoint:'',//使用门槛；0表示无门槛
				  perLimit:'',//每人限领张数
				  startTime:'',//有效开始时间
				}],
			}
		},
		onLoad() {
			this.getCouponList()
		},
		methods: {
			//优惠券列表
			async getCouponList(){
				let res= await this.$apis.getCouponList(uni.getStorageSync('wxuser_id'));
				if(res){
					this.userDetail = res.data
				}				
			},
			checkIndex(index,id) {
				this.tagid = id
				this.firstNum = index 
				this.getCoupon(id)
			},
		
		}
	}
</script>

<style lang="scss">
	page{
		background: #f6f6f6;
		.flex-1{
			flex: 1;
		}
		.lin-60{
			line-height: 60rpx;
		}
		.head-nav {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			background: #fff;
			margin-bottom: 32rpx;			
			.n-l{
				width: 50%;
				text-align: center;
				line-height: 80rpx;
				font-size: 30rpx;
				color: #969799;
				position: relative;
				.icons{
					display: none;
					width: 80rpx;
					height:6rpx;
					background: #84C0F4;
					border-radius: 4rpx;
					opacity: 1;	
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					margin: auto;
				}
			}
			.active{
				color:#333 ;
			}
			.active>.icons{
				display: block;
			}	
		}		
			
		.content-main {			
			height: 100%;
			.wrapper {
			  width: 670rpx;
			  height: 154rpx;
			  margin: 0 auto;
			  display: flex;
			  background: #FFF5F5;
			  border-radius:8rpx;
			  margin-bottom: 28rpx;
			}
			.alreadystyle{
				background: #FEEEEF;
			}
			.overdue{
				background: #FAF1F2;
				.btnn{
					color: #DC4141;
					opacity: 0.6;
				}
			}
			/*前半部分样式*/
			.content {
			  position: relative;
			  height: 154rpx;
			  flex: 0 0 230rpx;
			  text-align: center;
			  overflow: hidden;
			  border-top-left-radius: 18rpx;
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  flex-direction: column;
			}
			
			/*后半部分样式*/
			.tip {
			  position: relative;
			  flex: 1;
			  height: 154rpx;
			  box-sizing: border-box;
			  padding-left: 20rpx;
			  display: flex;
			  flex-direction: column;
			  justify-content: center;
			}
			
			/*中间竖直虚线样式*/
			.split-line {
			  position: relative;
			  flex: 0 0 0;
			  margin: 0 10rpx 0 6rpx;
			  border-left: 2rpx dashed #FFBBC4;
			}
			
			/*给虚线加两个伪类，基本样式如下*/
			.split-line:before,
			.split-line:after {
			  content: '';
			  position: absolute;
			  width: 32rpx;
			  height: 16rpx;
			  background: #f6f6f6;
			  left: -18rpx;
			  z-index: 1;
			}
			
			/*几个伪类化成的圆弧的样式以及位置（置于顶部）我把它放在一起了*/
			.content:before,
			.tip:before,
			.split-line:before {
			  border-radius: 0 0 16rpx 16rpx;
			  top: 0;
			}
			
			/*几个伪类化成的圆弧的样式以及位置（置于底部）我把它放在一起了*/
			.content:after,
			.tip:after,
			.split-line:after {
			  border-radius: 16rpx 16rpx 0 0;
			  bottom: 0;
			}
			.moyfh {
			  font-size: 40rpx;
			  font-family: PingFangSC-Semibold, PingFang SC;
			  font-weight: 600;
			}
			
			.moneyNum {
			  font-size:40rpx;
			  font-weight: 600;
			}
			
			.couponmaes {
			  font-size: 30rpx;
			  font-weight: 600;
			   overflow: hidden;
			    text-overflow: ellipsis;
			    display: -webkit-box;
			    -webkit-line-clamp: 1;
			    -webkit-box-orient: vertical;
			}
			
			.vnameBx {
			  text-align: center;
			}
			
			.btnbx {
			  position: absolute;
			  right: 0;
			  top: 0;
			  bottom: 0;
			  display: flex;
			  justify-content: center;
			  align-items: center;
			}
			
			.btnw {
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  width: 148rpx;
			  height: 148rpx;
			  border-radius: 50%;
			  margin-right: 30rpx;
			}
			.btnBgActive {
			  color: rgba(140, 31, 37, 1);
			  box-shadow: 0px 2px 29px 0px rgba(77, 12, 15, 0.56);
			  background: linear-gradient(319deg, rgba(244, 219, 160, 1) 0%, rgba(255, 255, 255, 1) 100%);
			}
			.btnBgGray {
			  box-shadow: 0px 2px 29px 0px rgba(77, 12, 15, 0.56);
			  background:#999;
			  color: #fff;
			}
			.btnn {
				 font-size: 30rpx;
			     line-height: 46rpx;
			     position: absolute;
			     right: 5%;
			     top: 15%;			 
			}
			.moveCm {
			  animation: scale 0.8s ease-in-out infinite alternate;
			}
			
			@keyframes scale {
			  0% {
			    transform: scale(0.92);
			  }
			
			  100% {
			    transform: scale(1);
			  }
			}
		}
	}
	
</style>
